<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue2.js"></script>
</head>
<body>

<!--
    事件修饰符的使用
      .stop          @click.stop      阻止事件冒泡行为
      .prevent       @click.prevent   阻止事件的默认行为
      .once          @click.once    事件一次有效  只会触发一次
      .self          @click.self    只监听自己本身的事件行为
-->
<div id="app">

    <div id="box" @click.self="dv()" style="width: 200px;height: 200px;border: 1px solid red;">
        <button @click.once="btn()">普通按钮</button>
    </div>

    <a href="https://www.baidu.com"  @click.prevent="go()">baidu</a>
    <p></p>
</div>




<script>
    const app = new Vue({
        el: '#app',
        data: {},
        methods: {
            dv() {
                console.log("div click")
            },
            btn() {
                console.log("btn click")
            },
            go(){
                console.log("超链接的默认行为被阻止")
            }
        }
    })
</script>
</body>
</html>